{% extends "base.html" %}

{% load util_functions %}

{% block body %}

<div id="session" class="container">
<table class="table table-striped table-bordered table-condensed table-hover">
    <caption><h4>{{ labels.title }} (<a href="{% url 'edit_session' project.pk session.pk %}">edit</a>)</h4></caption>
    <tbody>
    <tr>
        <td><div class="text-right">{{ labels.name }}</div></td>
        <td>{{ session.name }}</td>
    </tr>
    {% if session.description %}
    <tr>
        <td><div class="text-top text-right">{{ labels.description }}</div></td>
        <td>{{ session.description|linebreaks }}</td>
    </tr>
    {% endif %}
    <tr>
        <td><div class="text-right">{{ labels.upload_code }}</div></td>
        <td>{{ session.upload_code }}</td>
    </tr>
    <tr>
        <td><div class="text-right">{{ labels.dbms }}</div></td>
        <td>{{ session.dbms }}</td>
    </tr>
    <tr>
        <td><div class="text-right">{{ labels.hardware }}</div></td>
        <td>{{ session.hardware.name }}</td>
    </tr>
    <tr>
        <td><div class="text-right">{{ labels.creation_time }}</div></td>
        <td>{{ session.creation_time }}</td>
    </tr>
    <tr>
        <td><div class="text-right">{{ labels.last_update }}</div></td>
        <td>{{ session.last_update }}</td>
    </tr>
    <tr>
        <td><div class="text-right">{{ labels.tuning_session }}</div></td>
        <td>{{ session.tuning_session }}</td>
    </tr>
    <tr>
        <td><div class="text-right">{{ labels.target_objective }}</div></td>
        <td>{{ metric_meta|get_item:session.target_objective|get_attr:"pprint" }}</td>
    </tr>
    </tbody>
</table>
</div>

<hr>

<div class="container">
<div class="row">

<div id="sidebar" class="col-md-3">
<div id="dbmss">
    <div><h4>DBMS</h4></div>
    <div class="boxbody checkbox">
        <ul>
        {% for dbms_key, dbms in dbmss.items %}
        <li><label><input type="checkbox" name="dbms" value="{{ dbms_key }}"/> {{ dbms.full_name }}</label></li>
        {% endfor %}
        </ul>
    </div>
</div>
<div id="workload">
    <div><h4>Workload</h4></div>
    <div class="boxbody radio">
        <ul>
        <li><label><input type="radio" name="workload" value="show_none" /> Display none</label></li>
        </ul>
        <ul>
        {% for wkld, confs in workloads.items %}
        <li>
        <label><input id="workload_{{ wkld }}" type="radio" name="workload" value="{{ wkld }}" /> {{ wkld }}</label>
        <div id="div_specific_{{ wkld }}">
        <ul>
        {% for conf in confs %}
        <li><label><input id="specific_{{ wkld }}_{{ conf.pk }}" type="checkbox" name="specific" value="{{ conf.pk }}"/> {{ conf.name }}</label></li>
        {% endfor %}
        </ul>
        </div>
        </li>
        {% endfor %}
        </ul>
    </div>
</div>
<!-- <div id="additional_filter">
    <div><h4>Additional Filter</h4></div>
    <div class="boxbody">
        <ul>
        {% for filter in filters %}
        <li><label>{{ filter.print }}<select class="selectpicker" name="additional_{{ filter.field }}">
            <option value="select_all">Select All</option>
            {% for value in filter.values %}
            <option value="{{ value }}">{{ value }}</option>
            {% endfor %}
        </select></label></li>
        {% endfor %}
        </ul>
    </div>
</div> -->
<div id="metric">
    <div><h4>Plot Metrics</h4></div>
    <div class="checkbox boxbody">
        <table id="metrictable">
            <thead style="display:none;">
                <tr>
                    <th>Metrics</th>
                </tr>
            </thead>
            <tbody>

                {% for metric in metrics %}
                <tr>
                    <td style="background-color: white">
                    <input type="checkbox" name="metric" value="{{ metric }}" > {{ metric_meta|get_item:metric|get_attr:"pprint" }}
                    </td>
                </tr>
                {% endfor %}  
            </tbody>
        </table>
    </div>
</div>
</div>

<div class="col-md-9">
<div id="configbar" class="row">
    <div class="col-sm-10">
    Show the last
    <select id="results_per_page" class="selectpicker show-tick" data-width="fit" data-style="btn-default">
        {% for n_res in results_per_page %}
        <option value="{{ n_res }}">{{ n_res }}</option>
        {% endfor %}
    </select> results
    </div>
    <div class="col-sm-2 checkbox">
        <label><input id="equidistant" class="option" name="equidistant" type="checkbox"/> Equidistant</label>
    </div>
</div>

<div id="content" class="col-sm-10">
    <div id="plotgrid" class="plotcontainer row"></div>
    <div id="result_table">
        <h4>Filtered Results</h4>
        <table id="dataTable">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        </table>
    </div>

<!-- table tools stuff -->
<link rel='stylesheet' type='text/css' href='{{ STATIC_URL }}css/jquery.dataTables.css'>
<script type="text/javascript" src='{{ STATIC_URL }}js/jquery.dataTables.min.js'></script> 
<script type="text/javascript" src='{{ STATIC_URL }}js/FixedHeader.min.js'></script>
</div>

</div>

</div>
</div>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jqplot/jqplot.canvasAxisTickRenderer.min.js"></script>


<script type="text/javascript" src="{{ STATIC_URL }}js/timeline.js"></script>
<script language="javascript">
$(function() {
    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
        "num-html-pre": function ( a ) {
            var x = String(a).replace( /<[\s\S]*?>/g, "" );
            return parseFloat( x );
        },

        "num-html-asc": function ( a, b ) {
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        },

        "num-html-desc": function ( a, b ) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

    $('.selectpicker').selectpicker();

    $("[id^=div_specific]").hide();

   Timeline.init({
        project : {{session.project.pk}},
        session: {{session.pk}},
        dbms: "{{ default_dbms }}",
        results_per_page: {{ default_results_per_page }},
        workload: "{{ default_workload }}",
        workloads: "{{ defaultspe }}",
        equidistant: "{{ default_equidistant }}",
        additional: [{% for filter in filters %} "{{ filter.field }}", {% endfor %}],
        metrics: [{% for metric in default_metrics %}"{{ metric }}", {% endfor %}]
    });
});

</script>

{% endblock body %}
